// Breakpoints
//
// Breakpoints made media-query easy.
// Breakpoints available are:
//
//  - ``$breakpoint-xs``:
//       __< 320__ px,
//       __2 columns__ grid
//  - ``$breakpoint-s``:
//       __\> 320__px..__< 800__px,
//       __4 columns__ grid
//  - ``$breakpoint-m``:
//       __\> 800__px..__< 1200__px
//       __12 columns__ grid
//  - ``$breakpoint-l``:
//       __\> 1200__px..__< 1900__px
//       __12 columns__ grid
//  - ``$breakpoint-xl``:
//       __\> 1900__px..__< 3200__px
//       __12 columns__ grid
//  - ``$breakpoints-xxl``:
//       __\> 3200__px
//       __24 columns__ grid
//
//  @see: http://thoughtbot.github.io/neat-docs/latest/#new-breakpoint
//
//  Replace ``@include media($mobile) {}`` with needed breakpoint.
//
//  For example, extra-small : ``@include media($breakpoint-xs) {}``
//  
// Style guide: app.atoms.breakpoints
$unit-xs: em(320);
$unit-s:  em(800);
$unit-m:  em(1200);
$unit-l:  em(1900);
$unit-xl: em(3200);

$breakpoint-xs:   new-breakpoint(max-width $unit-xs 2);
$breakpoint-s:    new-breakpoint(min-width $unit-xs max-width $unit-s 4);
$breakpoint-m:    new-breakpoint(min-width $unit-s max-width $unit-m 12);
$breakpoint-l:    new-breakpoint(min-width $unit-m max-width $unit-l 12);
$breakpoint-xl:   new-breakpoint(min-width $unit-l max-width $unit-xl 12);
$breakpoint-xxl:  new-breakpoint(min-width $unit-xl 24);
